<template>
  <table>
    <tr>
      <th>序号</th>
      <th>文件名</th>
      <th>上传时间</th>
      <th>文件大小</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in showList" :key="item.id">
      <td>{{ fIndex(index) }}</td>
      <td>{{ item.name }}</td>
      <td>{{ dfDate(item.date) }}</td>
      <td>{{ fSize(item.size) }}</td>
      <td>
        <button @click="handleClickEdit(item.id, item.name)">修改</button>
        <button @click="handleClickDelete(item.id)">删除</button>
      </td>
    </tr>
  </table>
</template>

<script lang="ts">
import { IFileListM } from '@/typing'
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'FileListTab',
  props: {
    showList: {
      type: Array as PropType<IFileListM[]>,
      require: true
    },
    currentPageIndex: {
      type: Number,
      default: 0
    }
  },
  emits: ['handleClickEdit', 'handleClickDelete'],
  setup(props, { emit }) {
    const methods = {
      // 点击修改按钮
      handleClickEdit(id: number, name: string) {
        emit('handleClickEdit', id, name)
      },
      // 点击删除按钮
      handleClickDelete(id: number) {
        emit('handleClickDelete', id)
      },
      // 过滤序号
      fIndex(index: number): number {
        return props.currentPageIndex + index + 1
      },
      // /文件大小单位转换 m g
      fSize(size: number): string {
        const kb = size / 1024
        const m = kb / 1024
        const g = m / 1024
        let result: string | number = size
        if (kb > 1024) {
          if (m > 1024) {
            result = g.toFixed(2)
            return `${result} GB`
          } else {
            result = m.toFixed(2)
            return `${result} MB`
          }
        } else {
          result = kb.toFixed(2)
          return `${result} KB`
        }
      },
      //  格式化日期
      dfDate(date: number): string {
        const time = new Date(date)
        let ret = ''
        const y = time.getFullYear()
        const m = (time.getMonth() + 1 + '').padStart(2, '0')
        const d = (time.getDate() + '').padStart(2, '0')
        const h = (time.getHours() + '').padStart(2, '0')
        const mi = (time.getMinutes() + '').padStart(2, '0')
        const s = (time.getSeconds() + '').padStart(2, '0')
        ret = `${y} - ${m} - ${d} —— ${h} : ${mi} : ${s}`
        return ret
      }
    }

    return {
      ...methods
    }
  }
})
</script>

<style lang="stylus" scoped>
table
  margin 0 auto
  width 98%
  border-collapse collapse
  th
    border none
    background-color #a3d8f3
    height  5rem

table,
td,
th
  border .25rem solid #2e77d6
  font-size 1.7rem
  text-overflow ellipsis

tr
  td
    height 4.7rem

tr
  td:nth-child(1)
    width 9rem
    text-align center

tr
  td:nth-child(2)
    width 50rem
    max-width 50rem
    overflow hidden
    padding 0 2rem 0

tr
  td:nth-child(3)
    text-align center

tr
  td:nth-child(4)
    width 15rem
    min-width 80px
    text-align right
    padding-right 3.2rem

tr
  td:nth-child(5)
    width 20rem
    min-width 100px
    text-align center

button
  outline none
  margin 0 1rem
  height 3.2rem
  min-height 22px
  width 7rem
  min-width 38px
  border none
  color white
  font-size 1.6rem
  border-radius: .7rem
  background #2d989a
  box-shadow  .1rem .1rem .1rem #134142, -0.1rem -0.1rem .1rem #47eff2
  cursor pointer
  transition all .3s ease
  &:hover
    border-radius 2rem
    box-shadow  .1rem .1rem .1rem #134142 inset, -0.1rem -0.1rem .1rem #47eff2 inset
  &:nth-child(2)
    background-color #8a2846
    box-shadow:  .1rem .1rem .1rem #3b111e, -0.1rem -0.1rem .1rem #d93f6e
    &:hover
      box-shadow: inset -0.1rem .1rem .3rem #3b111e, inset .1rem -0.1rem 3rem #d93f6e
</style>
